<template>
    <ul class="sort">
        <li v-for="(item,index) in sortList":key="index">

            <img :src="item.imgUrl" alt="" />
            <span>{{ item.title }}</span>
        </li>
    </ul>
</template>
<script setup>
let sortList=[{
    id:1,
    title:'女装',
    imgUrl:'./images/1.png'
},{
    id:2,
    title:'女鞋',
    imgUrl:'./images/2.png'
},{
    id:3,
    title:'上衣',
    imgUrl:'./images/3.png'
},{
    id:4,
    title:'美妆护肤',
    imgUrl:'./images/4 -jiemaogao.png'
},{
    id:5,
    title:'裤子',
    imgUrl:'./images/5.png'
},{
    id:6,
    title:'母婴童装',
    imgUrl:'./images/6.png'
},{
    id:7,
    title:'裙子',
    imgUrl:'./images/7.png'
},{
    id:8,
    title:'男装男鞋',
    imgUrl:'./images/8.png'
},{
    id:9,
    title:'套装',
    imgUrl:'./images/9.png'
},{
    id:10,
    title:'配饰',
    imgUrl:'./images/10.png'
}
]
</script>
<style scoped>
.sort{
    width: 100%;
    background-color: white;
    font-size: 0.6rem;
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;

}
.sort li{
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
flex: 0 0 20%;
margin: 0.3rem 0;
}
.sort li img{
    width: 2rem;
    height: 2rem;
}
.sort li span{
    margin-top: 0.8rem;
}
</style>